<template>
  <div class="nf">
    <div class="header">
      <router-link to="/home">
        <span class="bb"><van-icon name="arrow-left" /></span>
      </router-link>
      <h3>{{ this.newfinddata[0].biaoqian }}</h3>
      <!-- <h3>ferwgv</h3> -->
      <span class="iconfont icon-sousuo"></span>
    </div>
    <div class="nn">
      <div class="nav">
        <router-link to="/" v-for="v in 10" :key="v">推荐</router-link>
      </div>
      <span class="iconfont icon-xiajiantou"></span>
    </div>
    <!-- <Banner /> -->
    <img :src="newfinddata[0].banimg" alt="" class="guang" />
    <Like :goodsstr="newpics">
      <!-- <h3 slot="likename" class="hh">推荐</h3> -->
    </Like>
    <!-- <img src="../../public/newfind/11.jpg" alt="" /> -->
  </div>
</template>

<script>
// import Banner from "../components/Home/banner.vue";
import Like from "../components/Home/like";
export default {
  mounted() {
    // console.log("bjhcwbfhjbj,", this.$store.state.homem.newdata[0].banimg);
    console.log("我是初始值", this.newarr);
    this.newnum = this.newarr.filter((v) => {
      if (v.id == this.$route.params.goodsid) {
        return v;
      }
    });
    console.log("我是筛选后得知", this.newnum);
    this.$store.commit("upnewdata", this.newnum);
    console.log("拿到的vuex里面的数据", this.$store.state.homem.newdata);
    // console.log("11111", this.$store.state.homem.newdata);
  },
  data() {
    return {
      newnum: " ",
    };
  },
  components: {
    // Banner,
    Like,
  },
  computed: {
    newarr() {
      return this.$store.state.homem.newfinds;
    },
    newfinddata() {
      return this.$store.state.homem.newdata;
    },
    nn() {
      return this.$store.state.homem.newdata.goods;
    },
      newpics() {
      return this.$store.state.listm.newpic;
    },
  },
};
</script>

<style scoped>
.nf {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: #fff; */
}
.header {
  width: 95%;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 0.44rem;
  width: 100%;
  background-color: #fff;
  z-index: 100;
}
/* .icon-xiajiantou {
  font-size: 0.17rem;
  margin-left: 0.2rem;
} */
h3 {
  width: 2.3rem;
  text-align: center;
}
p {
  margin-right: 0.2rem;
}
.icon-sousuo {
  font-size: 0.25rem;
}
.bb {
  font-size: 0.2rem;
}
.nn {
  display: flex;
  width: 100%;
  background-color: #fff;
}
.nn span {
  height: 0.375rem;
}
.nn .icon-xiajiantou {
  font-size: 0.21rem;
  line-height: 0.375rem;
  margin-top: 0.43rem;
  margin-right: 0.1rem;
}
.nav {
  width: 92%;
  height: 0.375rem;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 0.44rem;
}
.nav a {
  padding: 0 15px;
  flex-shrink: 0;
  color: #797d82;
  font-size: 0.15rem;
}
.guang {
  width: 100%;
  height: 2.1rem;
  /* margin-top: 0.1rem; */
}
</style>

